<template>
	<view class="order-pages"
		:style="{background:pageColor,height:scrollEnabled?'100vh':'',overflowY:scrollEnabled?'hidden':'auto'}"
		v-if="detail.id">
		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
			style="z-index: 999;" :style="{background:'rgba(255,255,255,0.5)'}" v-if="options.paysuc">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="订单详情" color="#333"
			:backgroundColor="pageScrollTop>0?primaryColor:'none'" leftIcon="icon-left">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="nav-bg">
			<image src="https://api.huixuananmm.com/admin/anmo/order/nav-bg.png" mode="aspectFill"></image>
		</view>

		<view class="rel">
			<view class="item-child pl-lg pr-lg pt-lg pb-sm f-paragraph c-paragraph">
				<view style="height:60rpx" v-if="options.paysuc"></view>
				<view class="flex-y-baseline">
					<view class="flex-center" @tap="changeOrderTypeBox('open')">
						<view class="text-bold c-title f-md-title pr-sm">{{statusType[detail.pay_type]}}</view>
						<view class="flex-center fill-base pay-type-icon">
							<i class="iconfont iconchefeijifeiguize c-caption"
								style="font-size: 12px;line-height: normal;"></i>
						</view>
					</view>
					<view @tap.stop="$refs.refuse_item.open()" class="ml-md"
						v-if="(detail.pay_type == -1 || detail.pay_type == 8) && detail.coach_refund_time">
						{{$t('action.attendantName')}}拒单，查看原因
					</view>
				</view>

				<view class="f-caption mt-sm" v-if="detail.pay_type == 1 && detail.end_time > 0">
					<view class="flex-warp">请在<min-countdown :targetTime="over_time_text" class="c-warning"
							@callback="countEnd"></min-countdown>内完成支付，逾期未支付将自动取消</view>
				</view>
			</view>

			<view class="pl-lg pr-lg" v-if="detail.pay_type == 6 && !detail.is_add">
				<view class="flex-y-center">
					服务还有<min-countdown :type="2" color="#FF9500" bgColor="#FF9500"
						:targetTime="detail.start_service_time_unix*1000" @callback="countEnd"></min-countdown>
					<view class="ml-sm">结束</view>
				</view>
			</view>

			<!--已出发-->
			<view class="item-child f-paragraph c-paragraph radius-16 pl-lg pr-lg mt-md"
				v-if="detail.pay_type == 4 && configInfo.plugAuth.coachtravel">
				<orderMap :info="detail"></orderMap>
			</view>

			<view class="item-child mt-md ml-lg mr-lg pl-lg fill-base radius-16 flex-between" v-if="detail.sign_img">
				<text class="c-title">客户签字</text>
				<image @tap.stop="previewImage(detail.sign_img,[detail.sign_img])" class="sign_img radius-16"
					:src="detail.sign_img" mode="aspectFill">
				</image>
			</view>

			<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16 ">
				<view class="pb-lg f-paragraph c-title text-bold">服务内容</view>
				<view class="flex-between" :class="[{'mb-lg':aindex != detail.order_goods.length -1}]"
					v-for="(aitem,aindex) in detail.order_goods" :key="aindex">
					<!-- #ifdef H5 -->
					<view class="avatar radius-16">
						<view class="h5-image avatar radius-16"
							:style="{ backgroundImage : `url('${aitem.goods_cover}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" class="avatar radius-16" :src="aitem.goods_cover"></image>
					<!-- #endif -->
					<view class="flex-1 ml-md">
						<view class="flex-between">
							<view class="f-mini-title c-title text-bold max-330 ellipsis">
								{{aitem.goods_name}}
							</view>
							<view class="f-paragraph c-warning font-num flex-y-baseline">
								<text class="f-caption" style="padding-right: 2px;">¥</text>
								<text class="text-bold">{{aitem.price}}</text>
							</view>
						</view>
						<view class="flex-between mt-md">
							<view class="flex-warp f-desc">
								<view class="flex-1 c-caption">服务时长：{{aitem.time_long}}分钟</view>
								<view class="c-warning ml-sm" v-if="aitem.refund_num>0">已退x{{aitem.refund_num}}</view>
							</view>
							<view class="c-caption">x{{aitem.num}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="item-child mt-md ml-lg mr-lg pd-lg fill-base radius-16"
				v-if="detail.add_order_id && detail.add_order_id.length > 0">
				<view class="pb-lg f-paragraph c-title text-bold">加钟项目</view>
				<block v-for="(item,index) in detail.add_order_id" :key="index">
					<view class="flex-between" @tap.stop="$util.goUrl({url:`/user/pages/order/detail?id=${item.id}`})"
						:class="[{'mb-lg':aindex != item.order_goods.length -1}]"
						v-for="(aitem,aindex) in item.order_goods" :key="aindex">
						<!-- #ifdef H5 -->
						<view class="avatar lg radius-16">
							<view class="h5-image avatar lg radius-16"
								:style="{ backgroundImage : `url('${aitem.goods_cover}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" class="avatar lg radius-16" :src="aitem.goods_cover"></image>
						<!-- #endif -->
						<view class="flex-1 ml-md">
							<view class="flex-between">
								<view class="f-mini-title c-title text-bold max-330 ellipsis">
									{{aitem.goods_name}}
								</view>
								<view class="f-paragraph c-warning font-num flex-y-baseline">
									<text class="f-caption" style="padding-right: 2px;">¥</text>
									<text class="text-bold">{{aitem.price}}</text>
								</view>
							</view>
							<view class="flex-between mt-md">
								<view class="flex-warp f-desc">
									<view class="flex-1 c-caption">服务时长：{{aitem.time_long}}分钟</view>
									<view class="c-warning" v-if="aitem.refund_num>0">已退x{{aitem.refund_num}}</view>
								</view>
								<view class="c-caption">x{{aitem.num}}</view>
							</view>
						</view>
					</view>
					<view class="flex-between pt-lg">
						<view
							:style="{color: item.pay_type==1?'#F13F26':item.pay_type < 3 ? '#F99346' : item.pay_type < 7 ? primaryColor: '#999'}">
							{{statusType[item.pay_type]}}
							<min-countdown class="ml-sm" :targetTime="item.over_time" format="{%h}:{%m}:{%s}" @callback="countEnd" v-if="item.pay_type==1"></min-countdown>
						</view>
						<view v-if="item.pay_type==1">
							<button @tap.stop="toChangeItem('cancel_item',index)" class="clear-btn order-detail">取消</button>
							<button @tap.stop="toPay(index)" class="clear-btn order-detail"
								:style="{color:'#fff',background:primaryColor,borderColor:primaryColor}">去支付</button>
						</view>
						<view v-else>
							<button @tap.stop="goDetail('refund',index)" class="clear-btn order-detail"
								v-if="item.can_refund > 0">退款</button>
							<button
								@tap.stop="$util.goUrl({url:`/user/pages/bell/list?id=${item.id}&coach_id=${item.coach_id}&tab=1`})"
								class="clear-btn order-detail"
								:style="{color:'#fff',background:primaryColor,borderColor:primaryColor}"
								v-if="item.pay_type==6">升级项目</button>
							<button @tap.stop="goDetail('detail', index)" class="clear-btn order-detail">详情</button>
						</view>
					</view>
					<view class="flex-between f-desc c-title b-1px-t mt-lg pt-lg" :class="[{'pb-lg': index < detail.add_order_id.length - 1}]">
						<view class="pr-md">订单编号</view>
						<view class="flex-between">
							<view class="max-380 ellipsis c-caption">{{item.order_code}}</view>
							<view class="flex-center" @tap.stop="toCopy(item.order_code)">
								<i class="iconfont iconfuzhi" :style="{color: primaryColor}"></i>
								<view class="f-desc" style="padding-left: 6rpx;" :style="{color:primaryColor}">复制</view>
							</view>
						</view>
					</view>
				</block>
			</view>


		<view class="store-info mt-md ml-lg mr-lg pd-lg  fill-base radius-16" v-if="detail.store_id">
			<view class="f-mini-title c-title text-bold pb-md">
				{{detail.store_info.title}}
			</view>
			<view class="flex-between">
				<view class="c-title flex-1 mr-md" style="color: #303030;">
					<span>{{detail.store_info.address || `暂未设置门店地址`}}</span> 
					<span
						@tap.stop="toCopy(detail.store_info.address)">
						<span class="iconfont iconfuzhi pl-sm" style="margin-right: 6rpx;"
							:style="{color: primaryColor}"></span>
						<span class="f-desc" :style="{color:primaryColor}">复制</span>
					</span>
				</view>
				<view class="flex-center">
					<view @tap.stop="toConfirmTel(detail.store_info.phone)"
						class="item-icon rel flex-center radius-16" v-if="detail.store_info.phone">
						<view class="item-icon radius-16 abs" :style="{background:primaryColor}"></view>
						<i class="iconfont icondadianhua_1" :style="{color:primaryColor}"></i>
					</view>
					<view @tap.stop="toMap('store_info')" class="item-icon rel flex-center radius-16 ml-md"
						v-if="detail.store_info.address">
						<view class="item-icon radius-16 abs" :style="{background:primaryColor}"></view>
						<i class="iconfont icondizhi_1" :style="{color:primaryColor}"></i>
					</view>
				</view>
			</view>
		</view>


		<view class="mt-md ml-lg mr-lg pd-lg fill-base f-paragraph c-caption radius-16">
			<view class="flex-between">
				<view class="c-title">下单人</view>
				<view class="c-title">{{detail.address_info.user_name}}</view>
			</view>
			<view class="flex-between mt-md">
				<view class="c-title">联系方式</view>
				<view class="c-title">{{detail.address_info.mobile}}</view>
			</view>
			<view class="mt-md flex-x-between" v-if="!detail.store_id">
				<view class="c-title">服务地址</view>
				<view class="c-title max-450 text-right">{{`${detail.address_info.address}${detail.address_info.address_info}`}}
				</view>
			</view> 
		</view>

		<view class="mt-md ml-lg mr-lg pd-lg fill-base f-paragraph c-caption radius-16">
			<view class="flex-center">
				<image mode="aspectFill" class="avatar sm radius"
					:src="detail.coach_info ? detail.coach_info.work_img : `https://api.huixuananmm.com/admin/anmo/technician/default_technician.png`">
				</image>
				<view class="flex-1 ml-lg" :class="[{'flex-between':configInfo.plugAuth.im || configInfo.order_contact_coach}]">
					<view class="c-title ellipsis" :style="{maxWidth:configInfo.plugAuth.im ? '150rpx':'340rpx'}">
						{{detail.coach_info ? detail.coach_info.coach_name : '-'}}
					</view>
					<view class="flex-y-center"> 
						<view @tap.stop="toChat" class="chat-btn flex-center f-desc radius"
							:style="{color:primaryColor,borderColor:primaryColor}" v-if="configInfo.plugAuth.im && [3,4,5,6].includes(detail.pay_type)&&detail.coach_info&&detail.coach_info.user_id">
							<i class="iconfont iconxiaoxi1"></i>发消息</view>
						<view @tap.stop="toTel" class="chat-btn flex-center ml-md f-desc radius"
							:style="{color:primaryColor,borderColor:primaryColor}"
							v-if="configInfo.order_contact_coach"><i class="iconfont icondianhua12"></i>打电话</view>
					</view>
				</view>
			</view>
			<view class="flex-between mt-md">
				<view class="c-title">服务时间</view>
				<view class="c-title">{{detail.start_time}}</view>
			</view>
			<view class="flex-between mt-md">
				<view class="c-title">服务时长</view>
				<view class="c-title">{{detail.time_long}}分钟</view>
			</view>
		</view>
		
		<view class="mt-md ml-lg mr-lg pd-lg fill-base f-paragraph c-caption radius-16">
			<block v-if="!detail.is_add && !detail.store_id">
				<view class="flex-between mt-md">
					<view class="c-title">车费详情</view>
					<view class="flex-y-center c-title">{{carType[detail.car_type]}}
						<view class="ml-md" v-if="detail.car_type == 1">全程{{detail.distance}}</view>
					</view>
				</view>
				<view class="flex-between mt-md" v-if="detail.car_type == 1">
					<view class="c-title">出行费</view>
					<view class="flex-warp font-num">
						<view class="c-title flex-y-baseline" v-if="detail.free_fare">
							<text class="f-caption">¥</text>
							<text class="text-bold" style="padding-left: 2px;">0</text>
						</view>
						<view class="flex-y-baseline c-title" v-else>
							<text class="f-caption">¥</text>
							<text class="text-bold" style="padding-left: 2px;">{{detail.car_price}}</text>
						</view>
					</view>
				</view>
			</block>
			<view class="flex-between mt-md">
				<view class="c-title">服务费</view>
				<view class="font-num c-title flex-y-baseline">
					<text class="f-caption">¥</text>
					<text class="text-bold" style="padding-left: 2px;">{{detail.init_service_price}}</text>
				</view>
			</view>
			<view class="flex-between mt-md" v-if="detail.add_order_id && detail.add_order_id.length > 0">
				<view class="c-title">加钟费</view>
				<view class="font-num c-title flex-y-baseline">
					<text class="f-caption">¥</text>
					<text class="text-bold" style="padding-left: 2px;">{{detail.total_add_price}}</text>
				</view>
			</view>
			<view class="flex-between mt-md" v-if="detail.discount*1 > 0">
				<view class="c-title">优惠券</view>
				<view class="c-warning font-num flex-y-baseline">
					<text class="f-caption">-¥</text>
					<text class="text-bold" style="padding-left: 2px;">{{detail.discount}}</text>
				</view>
			</view>	
			<view class="flex-warp mt-md" v-if="detail.member_discount_balance*1 > 0">
				<view class="flex-1 c-title">会员卡折扣</view>
				<view class="c-warning flex-y-baseline">
					<text class="f-caption font-num">-¥</text>
					<text class="text-bold font-num">{{detail.member_discount_cash}}</text>
					<view class="text-bold flex-y-baseline" style="padding-left: 2px;">
						(<text class="font-num">{{detail.member_discount_balance}}</text><text class="f-caption">折</text>)
					</view>
				</view>
			</view>
			<view class="flex-warp mt-md" v-if="detail.balance_discount_cash*1 > 0">
				<view class="flex-1 c-title">储值卡折扣</view>
				<view @tap.stop="$refs.balance_discount_item.open()">
					<view class="c-warning flex-y-baseline">
						<text class="f-caption font-num">-¥</text>
						<text class="text-bold font-num">{{detail.balance_discount_cash}}</text>
						<view class="text-bold flex-y-baseline" style="padding-left: 2px;">
							(<text class="font-num">{{detail.balance_discount_num}}</text><text class="f-caption">张折扣卡</text>)
						</view>
					</view>
					<view class="flex-between">
						<view></view>
						<view class="f-caption" :style="{color:primaryColor}">查看明细</view>
					</view>
				</view>
			</view>
			<view class="mt-md flex" style="justify-content: space-between" v-if="detail.text || (detail.text_img&&detail.text_img.length>0)">
				<view class="c-title">订单备注</view>
				<view class="max-450">
					<view class="c-title" v-if="detail.text">
						<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
					</view>
					<view class="flex-warp item-child" v-if="detail.text_img && detail.text_img.length > 0">
						<block v-for="(item,index) in detail.text_img" :key="index">
							<image @tap.top="previewImage(item,detail.text_img)" mode="aspectFill"
								class="order-img mt-md mr-md radius-10" style="margin-right: 20rpx;" :src="item" />
						</block>
					</view>
				</view>
			</view>
			<view class="flex-between mt-md">
				<view class="c-title">支付方式</view>
				<view class="flex-y-baseline c-title">{{payType[detail.pay_model]}}</view>
			</view>
			<view class="flex-between mt-md pt-md b-1px-t">
				<view></view>
				<view class="flex-y-baseline c-title">合计
					<view class="c-warning font-num flex-y-baseline pl-md">
						<text class="f-mini-title">¥</text>
						<text class="text-bold f-md-title" style="padding-left: 2px;">{{detail.total_price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mt-md ml-lg mr-lg pd-lg fill-base f-paragraph c-caption radius-16">
			<view class=" flex-between flex-warp">
				<view class="flex-between c-title pr-md">订单编号</view>
				<view class="flex-between ">
					<view class="c-caption max-380 ellipsis">{{detail.order_code}}</view>
					<view class="flex-center" @tap.stop="toCopy(detail.order_code)">
						<i class="iconfont iconfuzhi" :style="{color: primaryColor}"></i>
						<view class="f-desc" style="padding-left: 6rpx;" :style="{color:primaryColor}">复制</view>
					</view>
				</view>
			</view>
			<view class="flex-between mt-md">
				<view class="c-title">下单时间</view>
				<view class="c-caption">{{detail.create_time}}</view>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<view class="footer-info fix fill-base" v-if="detail.pay_type != -1">
			<view class="flex-between pd-lg">
				<view></view>
				<view class="flex-center f-desc c-title">
					<!-- 服务中 -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact" class="clear-btn item-btn flex-center f-desc c-paragraph"
						style="border-radius: 100rpx;background: transparent;border: 1px solid #ccc;" v-if="configInfo.im_type == 2">联系客服</button>
					<button @tap.stop="toContact" class="clear-btn item-btn flex-center f-desc c-paragraph"
						style="border-radius: 100rpx;background: transparent;border: 1px solid #ccc;" v-else>联系客服</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<button @tap.stop="toContact" class="clear-btn item-btn flex-center f-desc c-paragraph"
						style="border-radius: 100rpx;background: transparent;border: 1px solid #ccc;">联系客服</button>
					<!-- #endif -->
					<!-- 待支付 -->
					<block v-if="detail.pay_type == 1">
						<view @tap.stop="toChangeItem('cancel_item',-1)" class="item-btn flex-center ml-md radius" 
						style="border-radius: 100rpx;background: transparent;border: 1px solid #ccc;">取消订单
						</view>
						<view @tap.stop="toPay(-1)" class="item-btn flex-center ml-md c-base radius"
							:style="{background:primaryColor}">
							去支付
						</view>
					</block>
					<!-- 待服务 -->
					<view @tap.stop="goDetail('refund',-1)" class="item-btn flex-center ml-md radius"
						v-if="detail.can_refund*1>0" style="border-radius: 100rpx;background: transparent;border: 1px solid #ccc;">
						退款</view>
					<view
						@tap.stop="$util.goUrl({url:`/user/pages/bell/list?id=${detail.id}&coach_id=${detail.coach_id}&tab=${detail.is_add?1:0}`})"
						class="item-btn flex-center ml-md c-base radius" :style="{background:primaryColor}"
						v-if="detail.pay_type == 6 && (detail.is_add || (!detail.is_add && detail.can_add_order))">
						{{detail.is_add?'升级项目':'加钟/升级'}}
					</view>
					<view @tap.stop="toEndOrder" class="item-btn flex-center ml-md c-base radius"
						:style="{background:primaryColor}" v-if="detail.pay_type == 6">
						完成服务
					</view>
					<view @tap.stop="toSign" class="item-btn flex-center ml-md c-base radius" style="padding: 0 50rpx;"
						:style="{background:primaryColor}" v-if="!detail.is_add && detail.order_end_time && !detail.sign_img">
						签字
					</view>
				</view>
			</view>
			<view class="space-safe"></view>
		</view>
		</view>
		<common-popup @confirm="confirmOperItem" ref="cancel_item" type="CANCEL_ORDER" :info="popupInfo"></common-popup>
		<common-popup @confirm="confirmOperItem" ref="end_item" type="END_ORDER" :info="popupInfo"></common-popup>

		<uni-popup ref="refuse_item" type="center" :custom="true">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">拒单原因</view>
				<scroll-view scroll-y @touchmove.stop.prevent class="refund-text mt-lg">
					<view>
						<text decode="emsp"
							style="word-break:break-all;">{{detail.coach_refund_text || '没有填写原因哦'}}</text>
					</view>
					<view class="mt-md f-caption c-caption">拒单时间：{{detail.coach_refund_time}}</view>
				</scroll-view>
				<view class="button">
					<view @tap.stop="$refs.refuse_item.close()" class="item-child"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>	

		<uni-popup ref="show_phone_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">拨打电话</view>
				<view class="space-lg"></view>
				<view @tap.stop="toCallPhone(1,configInfo.mobile)" class="flex-between mt-md f-mini-title c-caption"
					style="width: 100%;">
					<view class="flex-y-center">推荐1：<view class="c-title">{{configInfo.mobile}}
						</view>
					</view>
					<view :style="{color:primaryColor}">拨打</view>
				</view>
				<view @tap.stop="toCallPhone(2,detail.admin_phone)" class="flex-between mt-md f-mini-title c-caption"
					style="width: 100%;" v-if="detail.admin_id && detail.admin_phone">
					<view class="flex-y-center">推荐2：<view class="c-title">
							<block v-if="!detail.phone_encryption">
								{{detail.admin_phone.substring(0,3)}}****{{detail.admin_phone.substring(detail.admin_phone.length-4,detail.admin_phone.length)}}
							</block>
							<block v-else>
								{{detail.admin_phone}}
							</block>
						</view>
					</view>
					<view :style="{color:primaryColor}">拨打</view>
				</view>
			</view>
			<view class="flex-center mt-lg"><i @tap.stop="$refs.show_phone_item.close()"
					class="iconfont icon-close c-base" style="font-size: 60rpx;"></i>
			</view>
		</uni-popup>


		<!-- 完成服务 -->
		<uni-popup ref="end_order_item" type="bottom" :custom="true">
			<view @touchmove.stop.prevent class="common-popup-content fill-base"
				style="width: 100%;border-radius: 34rpx 34rpx 0 0;" v-if="endOrderInfo && endOrderInfo.end_order_rules">
				<view class="title">温馨提示</view>
				<scroll-view scroll-y class="f-mini-title c-title mt-md" style="width: 100%;max-height:50vh">
					<text decode="emsp" style="word-break:break-all;">{{endOrderInfo.end_order_rules}}</text>
				</scroll-view>
				<view @tap.stop="isAgree=!isAgree" class="mt-md pt-lg b-1px-t" style="width:100%">
					<view class="flex-y-center" style="height:36rpx">
						<i class="iconfont mr-sm" :class="isAgree?'icon-xuanze-fill':'icon-xuanze'"
							style="font-size: 36rpx" :style="{color:isAgree?primaryColor:'#999'}"></i>本人已认真阅读并同意上述内容
					</view>
				</view>
				<view class="button">
					<view @tap.stop="$refs.end_order_item.close()" class="item-child">
						取消
					</view>
					<view @tap.stop="toConfirmEndOrder" class="item-child"
						:style="{background: primaryColor,color:'#fff'}">
						{{endOrderInfo.user_end_sign?'确认签字':'确认完成'}}
					</view>
				</view>
				<view class="space-safe"></view>
				</block>
			</view>
		</uni-popup>
		
		<uni-popup ref="balance_discount_item" type="bottom" :custom="true">
			<view class="common-popup-content fill-base pd-lg" 
				style="width: 100%;border-radius: 34rpx 34rpx 0 0;" v-if="detail.pay_model==4">
				<view class="title">折扣明细</view>
				<scroll-view scroll-y @touchmove.stop.prevent class="balance-disocunt-list mt-lg">
					<view class="mt-md" v-for="(item,index) in detail.balance_discount_list" :key="index">
						<view class="f-mini-title c-title text-bold flex-y-baseline">{{item.title}} (<text class="font-num">{{item.discount}}</text>折)</view>
						<view class="flex-center f-paragraph c-title mt-sm">
							<view class="list-item flex-y-center">消费 <text class="font-num">¥{{item.value_cash}}</text></view>
							<view class="list-item flex-y-center">抵扣 <text class="font-num">¥{{item.cash}}</text></view>
							<view class="list-item flex-y-center">优惠 <text class="font-num">¥{{item.discount_cash}}</text></view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-between f-paragraph c-title b-1px-t mt-lg pt-lg" style="width:100%">
					<view>共优惠</view>
					<view class="f-mini-title text-bold c-warning font-num">¥{{detail.balance_discount_cash}}</view>
				</view>
				<view class="button">
					<view @tap.stop="$refs.balance_discount_item.close()" class="item-child"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</uni-popup>
		
		<uni-popup ref="order_type_box" type="center" :custom="true" @change="changePopup">
			<div class="fill-base order-type-box pt-lg">
				<view class="pb-lg f-title text-bold flex-center rel">
					订单流程
					<view class="abs" style="top:0;right: 30rpx;" @tap="changeOrderTypeBox('close')">
						<i class="iconfont iconguanbi1" style="color:#6A6A6A;font-size: 28rpx;"></i>
					</view>
				</view>
				<scroll-view scroll-y style="width: 100%;max-height:50vh">
					<view class="pl-lg pr-lg pb-lg">
						<timeline :list="lineList" :info="detail" type="user"></timeline>
					</view>
				</scroll-view>
				<view class="space-safe"></view>
			</div>
		</uni-popup>

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<longbingbing-app-check-auth type="phone" ref="app_check_item"
			@confirm="$util.goUrl({ url:call_phone, openType: 'call' })"></longbingbing-app-check-auth>
		<!-- #endif -->

	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import timeline from '@/components/timeline.vue'
	import orderMap from '@/components/order-map.vue'
	export default {
		components: {
			timeline,
			orderMap
		},
		data() {
			return {
				options: {},
				call_phone:'',
				statusPayType: [1],
				statusType: {
					'-1': '已取消',
					1: '待支付',
					2: '待接单',
					3: '待服务',
					4: this.$t('action.attendantName') + '出发',
					5: this.$t('action.attendantName') + '到达',
					6: '服务中',
					7: '已完成',
					8: '待转单'
				},
				carType: {
					0: '公交/地铁',
					1: '出租车'
				},
				payType: {
					1: '微信支付',
					2: '余额支付',
					3: '支付宝支付',
					4: '折扣卡支付'
				},
				lineList: [],
				base_service: [{
					pay_type: 3,
					title: this.$t('action.attendantName') + '接单',
					time: 'receiving_time',
					icon: 'iconjishijiedan'
				}, {
					pay_type: 4,
					title: this.$t('action.attendantName') + '出发',
					time: 'serout_time',
					addr: 'serout_address',
					icon: 'iconjishichufa'
				}, {
					pay_type: 5,
					title: this.$t('action.attendantName') + '到达',
					time: 'arrive_time',
					img: 'arrive_img',
					addr: 'arr_address',
					icon: 'iconjishidaoda'
				}, {
					pay_type: 6,
					title: '开始服务',
					time: 'start_service_time',
					icon: 'iconjishifuwu'
				}, {
					pay_type: 7,
					title: '服务完成',
					time: 'order_end_time',
					img: 'end_img',
					addr: 'end_address',
					icon: 'iconjishiwancheng'
				}],
				base_bell: [{
					pay_type: 3,
					title: this.$t('action.attendantName') + '接单',
					time: 'receiving_time',
					icon: 'iconjishijiedan'
				}, {
					pay_type: 6,
					title: '开始服务',
					time: 'start_service_time',
					icon: 'iconjishifuwu'
				}, {
					pay_type: 7,
					title: '服务完成',
					time: 'order_end_time',
					img: 'end_img',
					addr: 'end_address',
					icon: 'iconjishiwancheng'
				}],
				pageScrollTop: 0,
				detail: {
					pay_type: 0
				},
				popupInfo: {},
				endOrderInfo: {},
				isAgree: false,
				lockTap: false,
				scrollEnabled: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			wecom_staff: state => state.user.wecom_staff,
			haveOperItem: state => state.order.haveOperItem,
			over_time_text() {
				return new Date().getTime() + this.detail.over_time * 1000
			},
		}),
		onLoad(options) {
			this.options = options
			this.$util.showLoading()
			this.initIndex()
		}, 
		onShow() { 
			// #ifdef APP-PLUS
			var args = plus.runtime.arguments
			if (args == 'wechat-adapay-suc') {
				this.initRefresh()
				this.$util.back()
			}
			plus.runtime.arguments = null
			plus.runtime.arguments = ""
			// #endif 
			if (!this.haveOperItem) return
			this.initRefresh()
			let page = getCurrentPages().length
			if(page>1){
				this.$util.back()
			}
		},
		onPageScroll(e) {
			let {
				scrollTop
			} = e
			this.pageScrollTop = scrollTop
		},
		methods: {
			...mapActions(['getConfigInfo', 'getWecomStaff']),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh || !this.userInfo.id) {
					await this.getConfigInfo()
				}
				if (!refresh) {
					await this.getWecomStaff()
				}
				this.updateOrderItem({
					key: 'haveOperItem',
					val: false
				})
				let {
					id
				} = this.options
				let data = await this.$api.order.orderInfo({ 
					id
				})
				this.$util.setNavigationBarColor({
					color:'#000000',
					bg: this.primaryColor
				})
				data.is_balance = data.balance * 1 > 0 ? 1 : 0
				data.pay_type = data.pay_type == 8 ? 2 : data.pay_type
				let {
					pay_type,
					total_time_long: time_long,
					receiving_time = '',
					start_service_time = '',
					is_add = 0,
					store_id = 0,
					add_flow_path = 1,
					serout_address = '',
					add_order_id = []
				} = data
				if (serout_address && serout_address.length > 0) {
					data.serout_address = serout_address.split(' ')[0]
				}
				if (is_add) {
					if (!receiving_time && pay_type > 3) {
						data.receiving_time = start_service_time
					}
					if (!start_service_time && pay_type > 5) {
						data.start_service_time = receiving_time
					}
				} else if(add_order_id && add_order_id.length>0){
					data.add_order_id.map(item=>{
						if(item.pay_type==1){
							item.over_time =  new Date().getTime() + item.over_time*1000
						}
					})
				}
				if (pay_type == 6) {
					let start_service_time_unix = this.$util.DateToUnix(start_service_time) + time_long * 60
					data.start_service_time_unix = start_service_time_unix
				}
				let lineList = this.$util.deepCopy(is_add || store_id ? this.base_bell : this.base_service)
				this.lineList = lineList
				this.detail = data
				this.$util.hideAll()
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			countEnd() {
				this.$util.log("倒计时完了")
				setTimeout(() => {
					this.initRefresh()
					this.$util.back()
				}, 1000)
			},
			toSign() {
				let {
					id
				} = this.detail
				let url = `/user/pages/order/sign?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			async toEndOrder() {
				let {
					id,
					is_add = 0
				} = this.detail
				this.popupInfo = {
					id,
					refs_key: 'end_item'
				}
				let [{
					end_order_rules,
					user_end_sign
				}] = await Promise.all([this.$api.base.payOrderInfoConfig(), this.$api.order.canEndOrder({
					id
				})])
				if(is_add){ //加钟订单无需签字
					user_end_sign = 0
				}
				this.endOrderInfo = {
					id,
					end_order_rules,
					user_end_sign
				}
				this.isAgree = false
				this.$refs.end_order_item.open()
			},
			async toConfirmEndOrder() {
				let {
					id,
					user_end_sign
				} = this.endOrderInfo
				if (!this.isAgree) {
					this.$util.showToast({
						title: `请先阅读并同意上述内容`
					})
					return
				}
				if (!user_end_sign) {
					await this.confirmOperItem()
					this.$refs.end_order_item.close()
					return
				}
				this.$refs.end_order_item.close()
				this.$util.goUrl({
					url: `/user/pages/order/sign?id=${id}&endorder=1`
				})
			},
			// 取消订单/完成服务
			async toChangeItem(refs_key,index=-1) {
				if (this.lockTap) return
				let {
					id,
					order_code,
					order_goods,
					pay_type
				} = index==-1 ? this.detail : this.detail.add_order_id[index]
				let {
					goods_cover: image,
				} = order_goods[0]
				this.popupInfo = {
					id,
					name: `单号：${order_code}`,
					image,
					refs_key
				}
				this.$refs[refs_key].open()
			},
			// 确认：取消订单/完成服务
			async confirmOperItem() {
				let {
					id,
					refs_key
				} = this.popupInfo
				let methodArr = {
					'cancel_item': ['cancelOrder', '取消成功'],
					'end_item': ['endOrder', '完成成功']
				}
				let methodModel = methodArr[refs_key][0]
				let title = methodArr[refs_key][1]
				if (this.lockTap) return
				this.lockTap = true
				try {
					this.$refs[refs_key].close()
					await this.$api.order[methodModel]({
						id
					})
					this.$util.showToast({
						title
					})
					setTimeout(() => {
						this.initRefresh()
						this.$util.back()
						this.lockTap = false
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.initRefresh()
						this.$util.back()
						this.lockTap = false
					}, 2000)
				}
			},
			// 去支付
			async toPay(index=-1) {
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				let {
					id,
					pay_model,
					order_code
				} = index==-1?this.detail: this.detail.add_order_id[index]

				try {
					let {
						pay_list
					} = await this.$api.order.rePayOrder({
						id
					})
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}

						// #ifdef H5

						if (pay_model == 3) {
							let {
								autograph
							} = this
							let alipay_params = `?autograph=${autograph}&id=${id}`
							pay_list = Object.assign({}, pay_list, {
								order_id: id,
								page_url: `/user/pages/order/detail?id=${id}&paysuc=1`,
								alipay_params
							})
							this.updateOrderItem({
								key: 'alipayOrderParams',
								val: pay_list
							})
							this.$util.goUrl({
								url: `/user/pages/alipay-result${alipay_params}`
							})
							this.lockTap = false;
							setTimeout(() => {
								this.initRefresh()
								this.$util.back()
							}, 3000)
							return
						}
						// #endif
						
						
						// #ifdef APP-PLUS
						if (pay_model === 1 && pay_list.adapay) {
							pay_list = Object.assign(pay_list, {
								type: 0,
								order_code
							})
						}
						// #endif

						try {
							let payResType = await this.$util.pay(pay_list)
							if (payResType === 'adapay_app_wechat') {
								this.lockTap = false
								return
							}
							if (payResType != 'adapay_app_alipay') {
								this.$util.showToast({
									title: `支付成功`
								})
							}
							setTimeout(()=>{
								this.initRefresh()
								this.lockTap = false
								this.$util.back()
							}, 1000)
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							this.lockTap = false
							return
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
			// 订单详情/申请退款/去评价/签字确认
			async goDetail(page, index) {
				let {id} = index==-1 ?  this.options : this.detail.add_order_id[index]
				let flag = true
				if (page == 'refund') {
					flag = await this.$api.order.canRefundOrder({
						id
					})
				}
				if (!flag) {
					if(index==-1){
						this.detail.can_refund = 0
					} else {
						this.detail.add_order_id[index].can_refund = 0
					}
					this.$util.showToast({
						title: `当前订单不支持退款哦`
					})
					return
				}
				let url = `/user/pages/order/${page}?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			// 再来一单
			async toAgain() {
				let {
					id: order_id,
					coach_id
				} = this.detail
				await this.$api.order.onceMoreOrder({
					order_id
				})
				this.$util.goUrl({
					url: `/user/pages/order?id=${coach_id}`
				})
			},
			// 发消息
			async toChat(){
				let {
					user_id = 0,
					coach_id: receive_id = 0
				} = this.detail
				if(!receive_id) {
					this.$util.showToast({
						title:`不能给Ta发消息哦`
					})
					return
				}
				let data = await this.$api.im.startMassage({
					user_type: 1,
					receive_id,
					receive_type: 2
				})
				let val = this.$util.pick(data, ['user_id', 'user_type', 'receive_id',
					'receive_type', 'room_key'
				]) 
				let {
					user_id: uid,
					user_type: utype,
					receive_id: rid,
					receive_type: rtype
				} = val
				let is_host = user_id == uid && utype == 1
				if (!is_host) {
					val.user_id = rid
					val.user_type = rtype
					val.receive_id = uid
					val.receive_type = utype
				}
				this.updateUserItem({
					key: 'imChatOptions',
					val: val
				})
				this.$util.goUrl({
					url:`/im/pages/detail`
				})
			},
			// 打电话
			async toTel() {
				let {
					id: order_id,
					pay_type
				} = this.detail
				if ([2, 3, 4, 5, 6].includes(pay_type)) {
					let url = await this.$api.order.getVirtualPhone({
						order_id
					})
					if (!url) {
						this.$util.showToast({
							title: `稍后会有电话打入，请注意接听哦`
						})
						return
					}
					// #ifdef APP-PLUS
					this.toConfirmTel(url)
					// #endif
					// #ifndef APP-PLUS
					this.$util.goUrl({
						url,
						openType: 'call'
					})
					// #endif
				} else {
					let msg = pay_type == 7 ? '服务结束' : '服务取消'
					this.$util.showToast({
						title: `${msg}不能联系${this.$t('action.attendantName')}哦`
					})
				}
			},
			toConfirmTel(url) { 
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.CALL_PHONE') ===
					'undetermined') {
					this.call_phone = url
					this.$refs.app_check_item.open()
				} else {
					this.$util.goUrl({
						url,
						openType: 'call'
					})
				}
				// #endif
				// #ifndef APP-PLUS
				this.$util.goUrl({
					url,
					openType: 'call'
				})
				// #endif
			},
			async toContact() {
				let {
					hide_admin_mobile, //代理-商订单隐藏平台电话
					mobile,
					im_type,
					wecom_appid
				} = this.configInfo
				let {
					wecom_staff
				} = this
				let {
					id: order_id,
					admin_phone,
					phone_encryption = 0
				} = this.detail

				if (!hide_admin_mobile && admin_phone && im_type != 3) {
					this.$refs.show_phone_item.open()
					return
				}

				if (im_type == 3) {
					// #ifdef H5
					window.location.href = wecom_staff
					// #endif
					// #ifndef H5 
					// #ifdef MP-WEIXIN 
					try {
						wx.openCustomerServiceChat({
							extInfo: {
								url: wecom_staff
							},
							corpId: wecom_appid,
							fail(res) {
								uni.showToast({
									title: res.errorMsg,
									icon: 'none'
								})
							}
						})
					} catch (e) {
						this.$util.showToast({
							title: `请更新微信版本`
						})
					}
					// #endif
					// #ifdef APP-PLUS
					let wechat = null
					plus.share.getServices(res => {
						wechat = res.find(i => i.id === 'weixin')
						if (wechat) {
							wechat.openCustomerServiceChat({
								corpid: wecom_appid,
								url: wecom_staff
							}, err => {
								uni.showToast({
									title: err.errorMsg
								})
							})
						} else {
							uni.showToast({
								title: '当前环境不支持微信操作',
								icon: 'none'
							})
						}
					}, function() {
						uni.showToast({
							title: '获取服务失败，不支持该操作',
							icon: 'none'
						})
					})
					// #endif
					// #endif
					return
				}
				let isAdminPhone = hide_admin_mobile && admin_phone
				let url = isAdminPhone ? admin_phone : mobile
				if (isAdminPhone && !phone_encryption) {
					url = await this.$api.order.getVirtualPhone({
						order_id,
						phone: url
					})
				}
				if (!url) {
					this.$util.showToast({
						title: `稍后会有电话打入，请注意接听哦`
					})
					return
				}
				// #ifdef APP-PLUS
				this.toConfirmTel(url)
				// #endif
				// #ifndef APP-PLUS
				this.$util.goUrl({
					url,
					openType: 'call'
				})
				// #endif
			},
			// 拨打联系电话
			async toCallPhone(key, url) {
				let {
					id,
					phone_encryption
				} = this.detail
				if (key == 2 && !phone_encryption) {
					url = await this.$api.order.getVirtualPhone({
						order_id: id,
						phone: url
					})
				}
				if (!url) {
					this.$util.showToast({
						title: `稍后会有电话打入，请注意接听哦`
					})
					return
				}
				this.$refs.show_phone_item.close()
				this.$util.goUrl({
					url,
					openType: 'call'
				})
			},
			// 查看定位
			async toMap(key) {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				let {
					address,
					address_info = '',
					lat,
					lng
				} = this.detail[key]
				// #ifdef APP-PLUS
				this.$util.goMap({
					lat,
					lng,
					address,
					address_info
				})
				return
				// #endif
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address_info ? `${address} ${address_info}` : address,
					scale: 28
				})
			},
			toCopy(url) {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				this.$util.goUrl({
					url,
					openType: 'copy'
				})
			},
			previewImage(current, urls) {
				// #ifdef APP-PLUS 
				if (plus.os.name == 'Android' && plus.navigator.checkPermission('android.permission.WRITE_EXTERNAL_STORAGE') ==='undetermined') {
					this.$refs.preview_image_item
						.previewImage({
							current,
							urls
						})
				} else {
					this.$util.previewImage({
						current,
						urls
					})
				}
				// #endif
				// #ifndef APP-PLUS
				this.$util.previewImage({
					current,
					urls
				})
				// #endif
			},
			changeOrderTypeBox(type){
				this.scrollEnabled = type == 'open'
				this.$refs.order_type_box[type]()
			},
			changePopup(e){
				this.scrollEnabled = e.show
			}
		}
	}
</script>


<style lang="scss"> 
	.order-pages {
		.call-btn {
			width: 128rpx;
			height: 49rpx;
			border-radius: 8rpx
		}
		.chat-btn{
			width:159rpx;
			height:56rpx;
			border:1rpx solid #fff;
			
			.iconfont{
				margin-right:6rpx;
			}
		}
		.nav-bg{
			width: 100%;
			height: 500rpx;
			left: 0;
			// #ifndef H5
			top: 0;
			// #endif
			// #ifdef H5
			top: -88px;
			// #endif
			background-image: linear-gradient(#EEF6F0, #f5f5f5);
			position: fixed;
			image{
				width: 100%;
				height: 500rpx;
			}
		}
		.sign_img{
			width: 230rpx;
			height: 120rpx;
		}
		
		.pay-type-icon{
			width: 36rpx;
			height: 36rpx;
			border-radius: 36rpx;
			line-height: 36rpx;
		}
		
		.order-type-box{
			width: 690rpx;
			border-radius: 16rpx;
		}
		
		.item-child {
			.avatar {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>